﻿define(function (require, exports, module) {
    var Canvas = require('util/canvas');
    var ImageStorage = require('util/imageStorage');
    var Config = require('util/config');

    var m_loginButtonOptions = [{//登录按钮
        id: 'login',
        mouseOut: 'LOGIN_OK_OUT',
        mouseOver: 'LOGIN_OK_OVER',
        x: 257,
        y: 255
    }, {//退出按钮
        id: 'quit',
        mouseOut: 'LOGIN_QUIT_OUT',
        mouseOver: 'LOGIN_QUIT_OVER',
        x: 300,
        y: 341
    }];

    exports.renderAsync = eval(Wind.compile('async', function () {
        var bgLayer = Canvas.createLayer();
        var bgImage = $await(Canvas.createImageAsync({
            image: Config.images.LOGIN_BG, width: Config.settings.WIDTH, height: Config.settings.HEIGHT
        }));
        bgLayer.add(bgImage);
        Canvas.add(bgLayer);

        var form = $('<form id="loginForm" action="login.do">').appendTo(document.body);
        var txtName = $('<input id="txtName" name="name" class="loginName" type="text">').appendTo(form);
        $('<input id="txtPwd" name="pwd" type="password" class="loginPwd">').appendTo(form);
        txtName.focus();

        var operatingLayer = Canvas.createLayer();

        for (var i = 0, options; options = m_loginButtonOptions[i]; i++) {
            var outImg = $await(ImageStorage.getAsync(Config.images[options.mouseOut]));
            var overImg = $await(ImageStorage.getAsync(Config.images[options.mouseOver]));
            var btnImage = Canvas.createImage({ id: options.id, image: outImg, x: options.x, y: options.y, scale: { x: 0.8, y: 0.8} });
            btnImage.on('mouseover', function () {
                this.setImage(overImg);
                operatingLayer.draw();
            });
            btnImage.on('mouseout', function () {
                this.setImage(outImg);
                operatingLayer.draw();
            });
            operatingLayer.add(btnImage);
        };

        var failureGroup = Canvas.createGroup({ id: 'failureGroup', visible: false });
        var messageImage = $await(Canvas.createImageAsync({ image: Config.images.LOGIN_MESSAGE }));
        failureGroup.add(messageImage);

        var rect = Canvas.createRectWithBoxAnimation({ id: 'failure', width: 30, height: 18, x: 307, y: 255 });
        failureGroup.add(rect);

        operatingLayer.add(failureGroup);
        Canvas.add(operatingLayer);
    }));
});